<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.tab{
			width: 600px;
			margin:  100px auto;
		}
		.title span{
			float: left;
			width: 200px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border: 1px solid #000;
			box-sizing: border-box;
		}
		
		.title .active{
			background: orange;
			color: #fff;
		}
		.content .select{
			display: block;
		}
	</style>
</head>
<body>
	<div class="tab">
		<div class="title">
			
		</div>
		<div class="content">
			<p data-key="yinli"></p>
			<p data-key="weekday"></p>
			<p data-key="yi"></p>
			<p data-key="ji"></p>
		</div>
	</div>

	<script type="text/javascript">
		// 获取元素
		let obj = {
            "error_code": 0,
            "reason": "Success",
            "result": [
                {"data": {
                    "holiday": "元旦",//假日
                    "ji": "123123破土.安葬.行丧.开生坟.",//忌
                    "shuxiang": "马",//属相
                    "desc": "1月1日至3日放假调休，共3天。1月4日（星期日）上班。",//假日描述
                    "weekday": "星期四",//周几
                    "yi": "123213213订盟.纳采.造车器.祭祀.祈福.出行.安香.修造.动土.上梁.开市.交易.立券.移徙.入宅.会亲友.安机械.栽种.纳畜.造屋.起基.安床.造畜椆栖.",//宜
                    "lunarYear": "甲午年",//纪年
                    "yinli": "十一月十一",//农历
                    "year-month": "2015-1",//年份和月份
                    "date": "2015-1-1"//具体日期
                }
             },
             {
                "data": {
                    "holiday": "元旦",//假日
                    "ji": "1231232323112331破土.安葬.行丧.开生坟.",//忌
                    "shuxiang": "牛",//属相
                    "desc": "1月1日至3日放假调休，共3天。1月4日（星期日）上班。",//假日描述
                    "weekday": "星期四",//周几
                    "yi": "12321321313订盟.纳采.造车器.祭祀.祈福.出行.安香.修造.动土.上梁.开市.交易.立券.移徙.入宅.会亲友.安机械.栽种.纳畜.造屋.起基.安床.造畜椆栖.",//宜
                    "lunarYear": "甲午年",//纪年
                    "yinli": "十一月十二",//农历
                    "year-month": "2015-1",//年份和月份
                    "date": "2015-1-2"//具体日期
                }
            },
            {
                "data": {
                    "holiday": "元旦",//假日
                    "ji": "123213破土.安葬.行丧.开生坟.",//忌
                    "shuxiang": "猪",//属相
                    "desc": "1月1日至3日放假调休，共3天。1月4日（星期日）上班。",//假日描述
                    "weekday": "星期四",//周几
                    "yi": "123123订盟.纳采.造车器.祭祀.祈福.出行.安香.修造.动土.上梁.开市.交易.立券.移徙.入宅.会亲友.安机械.栽种.纳畜.造屋.起基.安床.造畜椆栖.",//宜
                    "lunarYear": "甲午年",//纪年
                    "yinli": "十一月十三",//农历
                    "year-month": "2015-1",//年份和月份
                    "date": "2015-1-3"//具体日期
                }
            }
            ]
        }
        let title = document.querySelector('.title')
        let ps = document.querySelectorAll('p')
        let result = obj.result

		for(let i = 0; i < result.length; i++){
			let spans = document.createElement('span')
			spans.innerText = result[i].data.date
			title.appendChild(spans)
			spans.index = i
			spans.onclick = function(){
				// ps[0].innerText = result[this.index].data.yinli
				// ps[1].innerText = result[this.index].data.weekday
				// ps[2].innerText = result[this.index].data.yi
				// ps[3].innerText = result[this.index].data.ji
				for(let j = 0; j < ps.length; j++){
					let key = ps[j].getAttribute('data-key')
					ps[j].innerText = result[this.index].data[key]
				}

			}

		}
		document.querySelectorAll('.title span')[0].click()
	</script>
</body>
</html>
</html>